<template>
    <div class="m-cartitem">
        <img class="m-cartIcon" @click="chooseItem(cart.isChoose)" v-if="cart.isChoose" src="@/assets/images/cart-choosed@2x.png" alt=""><!-- 选中 -->
        <img class="m-cartIcon" @click="chooseItem(cart.isChoose)" v-else src="@/assets/images/chooseGray_2@2x.png" alt=""><!-- 未选中 -->
        <img class="m-cartImg" :src="cart.pic" alt=""><!-- 商品图片 -->
        <div class="m-cartCont">
            <span>{{cart.goods}}</span>
            <p>&yen;{{cart.price}}</p>
        </div>
        <div class="m-cart-count">
            <span @click="minusQuantity">-</span>
            <input type="number" v-model="cart.quantity" name="count" id="">
            <span @click="addQuantity">+</span>
        </div>
    </div>
</template>

<script>
export default {
    name:'',
    props:['cartitem'],
    data () {
        return {
            cart:'',
            base_url:process.env.API_HOST,
        }
    },
    methods: {
        // 选中
        chooseItem(isChoose) {
            this.cart.isChoose = !isChoose;
            this.$emit('chooseItem',this.cart);
        },
        // 增加数量
        addQuantity() {
            let quantity = this.cart.quantity;
            let total_amount = this.cart.total_amount;
            if(quantity>=total_amount){
                this.$toast('库存不够啦o(╥﹏╥)o');
            }else{
                quantity++;
            }
            this.cart.quantity = quantity;
            this.$emit('addQuantity',this.cart);
        },
        // 减少数量
        minusQuantity() {
            let quantity = this.cart.quantity;
            if(quantity<=1){
                this.$toast('不能再少啦！');
            }else{
                quantity--;
            }
            this.cart.quantity = quantity;
            this.$emit('minusQuantity',this.cart);
        }
    },
    mounted() {
        this.cart = this.cartitem;
    }
}
</script>

<style lang="less" scoped>
.m-cartitem{
    .flex;
    background-color: white;
    padding: .8rem;
    .border-radius(6px);
    .m-cartIcon{
        width: 1.2rem;
        height: 1.2rem;
    }
    .m-cartImg{
        width: 5rem;
        height: 5rem;
        .border-radius(8px);
        margin: 0 1rem;
    }
    .m-cartCont{
        .flex;
        flex:1;
        flex-direction: column;
        justify-content: space-between;
        p{
            color: @primary-red;
        }
    }
    .m-cart-count{
        .flex;
        input[name='count']{
            width: 2rem;
            height: 1.4rem;
            text-align: center;
            line-height: 1.4rem;
            border: none;
            outline: none;
        }
        span{
            width: 1.4rem;
            height: 1.4rem;
            text-align: center;
            font-size: 1.6rem;
            line-height: 1.4rem;
            .border-radius(100%);
            color: white;
            &:first-child{
                background: @background-gray;
            }
            &:last-child{
                background: @primary-green;
            }
        }
    }
}
</style>
